<template>
	<div class="header">
			<img src="../assets/1.jpg">
			<h3>message</h3>
			<button>搜索</button>
		</div>
</template>


<script>
export default{
	name:'Header',
	data(){
			return{
				imgURL:'../assets/1.jpg',
				name:'message'
			}
		}
}	
	
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
		font-weight: normal;
	}
	.header{
		height: 9.6rem;
		background-color: #008B8B;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.header img{
		width: 8rem;
		height: 8rem;
		border-radius:4rem;
		margin-left: 2rem;
	}
	.header h3{
		font-size: 2rem;
		background-color: #17a2b8;
		color: white;
		padding: 1rem;
		line-height: 4rem;
		border-radius: 1rem;
	}
	.header button{
		font-size: 2rem;
		border: none;
		background-color: #6c757d;
		color: white;
		padding:1.5rem;
		border-radius: 1rem;
		margin-right: 2rem;
	}
</style>
